<template>
  <div>
    <el-container>
    <el-header class="header" height="120px">
      <div class="logo">
        <img src="../assets/images/logo-title.png" alt="logo">
      </div>
      <div class="nav">
        <el-menu class="menu" router mode="horizontal">
          <template v-for="item in menu">
            <el-menu-item v-if="!item.subs" :key="item.index" :index="item.index">{{ item.label }}</el-menu-item>
            <el-submenu v-else :key="item.index" :index="item.index">
              <template #title>{{ item.label }}</template>
              <el-menu-item v-for="subItem in item.subs" :key="subItem.index" :index="subItem.index">
                {{ subItem.label }}
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </div>
      <div class="user"></div>
    </el-header>
    <el-container>
    </el-container>
  </el-container>
  
  <el-container style="height: 100%">
    <el-aside class="aside">
      <el-menu router :default-active="activeIndex" background-color="#544133" text-color="#FFFFFF">

        <template v-for="(menu, index) in menus">
          <el-menu-item v-if="!menu.children" :index="menu.route" :key="menu.name"
                        @click="nav = {p: menu.name, s: null}">
            <i :class="menu.icon"></i>
            <span>{{ menu.name }}</span>
          </el-menu-item>
          
          <el-submenu v-else :index="`${index}`" :key="index">
            <template>
              <i :class="menu.icon"></i>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item v-for="(childMenu, childIndex) in menu.children" :index="childMenu.route" :key="childIndex"
                          @click="nav = {p: menu.name, s: childMenu.name}">
              <i :class="childMenu.icon"></i>
              <span>{{ childMenu.name }}</span>
            </el-menu-item>
          </el-submenu>
        </template>

      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <div class="breadcrumb">
          <i class="el-icon-s-fold"></i>
          <!--面包屑-->
          <el-breadcrumb separator="/" style="margin-left: 12px">
            <el-breadcrumb-item>{{ nav.p }}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="nav.s">{{ nav.s }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="userinfo">
          <span>欢迎用户{{ user }}</span>
          <el-button type="text" size="mini" @click="logout">注销</el-button>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data: () => ({
    menus: [
      {
        icon: 'el-icon-s-grid',
        name: '首页',
        route: '/'
      },
      {
        icon: 'el-icon-s-grid',
        name: '护理预约',
        children: [
          {
            icon: 'el-icon-s-grid',
            name: '绝育预约',
            route: '/doc/1'
          },
          {
            icon: 'el-icon-s-grid',
            name: '相亲配种',
            route: '/doc/2'
          },
        ]
      },
    ],

    menu: [
      {
        label: '猫猫市场',
        index: '/shop'
      },
      {
        label: '养猫指南',
        index: '/guide',
        subs: [
          {
            label: '猫猫信息',
            index: '/guide/info'
          },
          {
            label: '饲养指南',
            index: '/guide/feed'
          }
        ]
      },
      {
        label: '用品商城',
        index: '/goods'
      },
      {
        label: '猫猫护理',
        index: '/cater',
        subs: [
          {
            label: '生育预约',
            index: '/cater/beauty'
          },
          {
            label: '问诊预约',
            index: '/cater/diagnose'
          }
        ]
      },
      {
        label: '帮助中心',
        index: '/feedback'
      }
    ],
    activeIndex: '/',
    nav: {
      p: '首页',
      s: null
    },
    user: '',
  }),
  // mounted() {
  //   this.user = sessionStorage.getItem('user');
  //   if (!this.user) {
  //     this.$router.replace('/slogin');
  //   }
  // },
  methods: {
    logout() {
      this.$confirm('是否注销？', '注销确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.removeItem('user');
        this.$router.replace('/login');
        this.$message({
          type: 'success',
          message: '注销成功！'
        });
      }).catch(() => {
      });
    }
  }
}
</script>

<style lang="less" scoped>
.aside {
  background-color: rgb(99, 86, 75);
}

/deep/ .el-menu-item:hover {
  background-color: rgb(99, 86, 75);
}

/deep/ .is-active {
  background-color: rgb(99, 86, 75) !important;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(206, 206, 206);
  padding: 8px 16px;
  box-shadow: 0 2px 12px 0 rgb(99, 86, 75)
}

.breadcrumb {
  display: flex;
  align-items: center;
}

.userinfo {
  font-size: 12px;
}

@import "../assets/less/common";

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  padding-left: 32px;

  img {
    height: 100px;
  }
}

.el-menu-item.is-active {
  border-bottom-color: @theme-color !important;
}

.menu {
  border-bottom-color: #F9C3C5 !important;
}

.page {
  width: 100%;
  height: 100%;
}
</style>
